<script setup lang="ts">
import Nav from "@/components/Nav.vue";
var my1Nav = Nav;
var visualization = [
  { index: "0", main: "园区驾驶舱", router: "/index/visualization/first" },
  { index: "1", main: "园区招商分析", router: "/index/visualization/second" },
  { index: "2", main: "园区设备管理", router: "/index/visualization/third" },
  { index: "3", main: "能源消耗分析", router: "/index/visualization/fourth" },
];
</script>
<template>
  <div class="visualization">
    <div class="left">
      <my1-nav :menunav="visualization"></my1-nav>
    </div>
    <div class="right">
      <router-view></router-view>
    </div>
  </div>
</template>
<style scoped>
.visualization {
  height: 100%;
  display: flex;
}

.visualization .left {
  width: 255px;
  background: rgb(65, 92, 133);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  color: #fff;
}

.visualization .left a {
  color: #fff;
  text-decoration: none;
}

.visualization .left a:hover {
  color: #f66;
}

.visualization .right {
  flex: 1;
}
</style>
